<template>
    <div class="container">
      <el-dialog
        :title="`${directoryData.id ? '修改' : '新增'}目录`"
        :visible.sync="showDialog"
        width="40%"
      >
        <el-form 
          ref="directorysForm"
          :model="directorysForm"
          :rules="directorysFormRules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" class="elform">
            <el-select
              placeholder="请选择"
              style="width: 100%"
              v-model="directorysForm.subjectID"
              prop="id"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in subjectsOptions"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" class="elform" prop="materialmnecode">
            <el-input
              autocomplete="off"
              placeholder="请输入名称"
              style="width: 100%"
              v-model="directorysForm.materialmnecode"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称" class="elform" prop="directoryName">
            <el-input
              autocomplete="off"
              placeholder="请输入名称"
              style="width: 100%"
              v-model="directorysForm.directoryName"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称" class="elform" prop="directoryName">
            <el-input
              autocomplete="off"
              placeholder="请输入名称"
              style="width: 100%"
              v-model="directorysForm.directoryName"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称" class="elform" prop="directoryName">
            <el-input
              autocomplete="off"
              placeholder="请输入名称"
              style="width: 100%"
              v-model="directorysForm.directoryName"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称" class="elform" prop="directoryName">
            <el-input
              autocomplete="off"
              placeholder="请输入名称"
              style="width: 100%"
              v-model="directorysForm.directoryName"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称" class="elform" prop="directoryName">
            <el-input
              autocomplete="off"
              placeholder="请输入名称"
              style="width: 100%"
              v-model="directorysForm.directoryName"
            ></el-input>
          </el-form-item>  
          <el-form-item label="名称" class="elform" prop="directoryName">
            <el-input
              autocomplete="off"
              placeholder="请输入名称"
              style="width: 100%"
              v-model="directorysForm.directoryName"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="btnOK">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      directoryData: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        showDialog: false,
        subjectsOptions: [],
        directorysForm: {
          id: null,
          subjectID: null,
          directoryName: null,
          materialmnecode:''
        },
        directorysFormRules: {
          value: [{ type: "number", message: "请选择", tirgger: "blur" }],
          directoryName: [
            { required: true, message: "请输入目录名称", trigger: "blur" },
            { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
          ],
        },
      };
    },
    created() {
    //   this.getSubjectsOptions();
    },
    methods: {
    //   async getSubjectsOptions() {
    //     const { data } = await simple();
    //     this.subjectsOptions = data;
    //   },
      open() {
        this.showDialog = true;
        if (this.directoryData.id) {
          const { id, subjectID, directoryName } = this.directoryData;
          this.directorysForm = { id, subjectID, directoryName };
        } else {
          this.directorysForm = {
            id: null,
            subjectID: +this.$route.query.id || null,
            directoryName: null,
            materialmnecode:''
          };
        }
        this.$nextTick(() => {
          this.$refs.directorysForm.clearValidate();
        });
      },
      async btnOK() {
        this.$refs.directorysForm.validate(async (isOK) => {
          if (isOK) {
            if (!this.directoryData.id) {
              await add(this.directorysForm);
            } else {
              this.directorysForm.id = this.directoryData.id;
              await update(this.directorysForm);
            }
            this.$message.success("添加目录成功！");
            this.showDialog = false;
            this.$emit("renderDire");
          }
        });
      },
    },
  };
  </script>
  
  <style scoped >
  .elform {
    width: 100%;
  }
  .dialog-footer {
    text-align: right;
  }
  .el-form-item__content {
    margin-left: 10px;
  }
  </style>